<template>
  <div class="main">
    <div class="head">
      <pageHeader :breadCrumb="breadCrumb"> </pageHeader>
    </div>
    <div class="top">
      <div style="display: flex; align-items: center">
        <icon-left
          style="margin-right: 10px; cursor: pointer"
          @click="router.back()"
        />
        <p>工序流转卡</p>
      </div>
      <a-space>
        <a-button type="primary" @click="headShow = true">
          <template #icon>
            <icon-settings />
          </template>
          <template #default>表格设置</template>
        </a-button>
        <a-button v-print="printObj" @click="shenhes" type="outline">
          <template #icon>
            <icon-printer />
          </template>
          <template #default>打印</template>
        </a-button>
        <a-button type="outline">
          <template #icon>
            <icon-download />
          </template>
          <template #default>下载</template>
        </a-button>
      </a-space>
    </div>
    <div style="flex: 1; overflow: auto" v-if="!isEmpty">
      <div class="cn" v-if="!taskAll">
        <div id="printMe">
          <div class="main-cn">
            <PreviewOne
              :data="data.data"
              :columns="columns.data"
              :tableDate="tableData.data"
            />
          </div>
        </div>
      </div>
      <div class="cn2" v-else>
        <!-- <div style="background-color: #fff; padding: 20px; overflow: auto">
          <a-anchor :change-hash="false">
            <a-anchor-link
              v-for="item in data.data"
              :key="item.code"
              :href="`#${item.code}`"
            >
              <PreviewOne
                :min="true"
                :data="item"
                :columns="columns.data"
                :tableDate="item.productGroups"
              />
              {{ item.code }}</a-anchor-link
            >
          </a-anchor>
        </div> -->
        <div id="printMe" style="margin: 0 auto">
          <div v-for="item in data.data" :key="item.id">
            <div class="main-cn" :id="item.code">
              <PreviewOne
                :data="item"
                :columns="columns.data"
                :tableDate="item.productGroups"
              />
            </div>
            <div class="break-after"></div>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-top: 50px" v-else><a-empty /></div>
  </div>
  <TableHeads
    v-model:visible="headShow"
    :headData="columns.data"
    @header-save="save"
  />
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import pageHeader from '@/components/page-header/index.vue';
  import { useRoute } from 'vue-router';
  import { useRouter } from 'vue-router';
  import {
    GetFlowCardMain,
    GetFlowCardMains,
  } from '@/api/produce-management/produce-list/index';
  import TableHeads from './TableHead/index.vue';
  import PreviewOne from './PreviewOne/index.vue';

  const headShow = ref(false);
  const route = useRoute();
  const router = useRouter();
  const taskAll = ref(false);
  const id = route.query.id as unknown as number;
  const data = reactive<any>({ data: {} });
  const isEmpty = ref(false);
  const columns: any = reactive({
    data: [
      {
        id: 1,
        title: '序号',
        dataIndex: 'index',
        align: 'center',
        code: 1,
      },
      {
        id: 2,
        title: '工序名称',
        dataIndex: 'name',
        align: 'center',
        code: 1,
      },
      {
        id: 3,
        title: '合格数',
        dataIndex: 'a',
        align: 'center',
        code: 1,
      },
      {
        id: 4,
        title: '不合格数',
        dataIndex: 's',
        align: 'center',
      },
      {
        id: 5,
        title: '完工人员/时间',
        dataIndex: 'd',
        align: 'center',
        code: 1,
      },
      {
        id: 6,
        title: '接收人员/时间',
        dataIndex: 'q',
        align: 'center',
      },
      {
        id: 7,
        title: '质检人员/时间',
        dataIndex: 'w',
        align: 'center',
      },
      {
        id: 8,
        title: '工序品质判定',
        dataIndex: 'e',
        align: 'center',
        slotName: 'custom',
      },
      {
        id: 9,
        title: '备注',
        dataIndex: 'r',
        align: 'center',
      },
    ],
  });
  const tableData = reactive<any>({ data: [] });
  const breadCrumb: string[] = ['生产管理', '生产任务单'];
  const printObj = {
    id: 'printMe',
  };
  const init = async () => {
    let res: any;
    if (route.query.taskId) {
      taskAll.value = true;
      res = await GetFlowCardMains({
        taskId: route.query.taskId as unknown as number,
      });
      if (!res.length) {
        isEmpty.value = true;
        return;
      }
      data.data = res;
      data.data.forEach((ele: any) => {
        ele.productGroups =
          ele.produceTask?.planModel?.workOrderModel?.product?.productModel?.productGroups.map(
            (ele: any, index: number) => {
              const { id, name } = ele;
              return {
                id,
                name,
                index: index + 1,
              };
            }
          );
      });
    } else {
      res = await GetFlowCardMain({ id });
      data.data = res;
      data.data?.produceTask?.planModel?.workOrderModel?.product?.productModel?.productGroups.forEach(
        (ele: any, index: number) => {
          const { id, name } = ele;
          tableData.data.push({ id, name, index: index + 1 });
        }
      );
    }
  };
  init();
  const save = (e: any) => {
    columns.data = e;
  };
  const shenhes = (e: any) => {};
</script>

<style lang="less" scoped>
  .main {
    display: flex;
    flex-direction: column;
    // overflow-y: auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // width: calc(100% + 40px);
    // height: calc(100% + 40px);
    background-color: #f2f3f5;
    .head {
      background-color: #fff;
      padding: 5px 10px;
      border-bottom-left-radius: 12px;
      border-bottom-right-radius: 12px;
      margin-bottom: 10px;
    }
    .top {
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      padding: 10px 15px;
      border-radius: 12px;
      align-items: center;
      p {
        padding: 0;
        margin: 0;
      }
    }
  }
  #printMe {
    overflow: auto;
    .main-cn {
      padding: 20px 40px;
      background-color: #fff;
    }
  }
  .cn {
    width: 80%;
    margin: 20px auto;
    box-shadow: 0 0 10px #e2e3e5c2;
  }
  .cn2 {
    display: flex;
    margin-top: 20px;
  }
  @media print {
    /* 隐藏页眉和页脚 */
    @page {
      margin: 0;
    }
    @top-center {
      content: none;
    }
    @bottom-center {
      content: none;
    }
  }
  .break-after {
    page-break-after: always;
    margin-bottom: 40px;
  }
</style>
